<template>
  <div>
    <el-dropdown class="userDd">
      <div class="userDrop">
        <span class="userDrop_text">
          {{ $store.state.username }}
          <i class="el-icon-caret-bottom"></i>
        </span>
        <img src="@/assets/avatar.jpg" alt="user" />
      </div>
      <el-dropdown-menu solt="dropdown">
        <el-dropdown-item>
          <router-link to="/">
            <i class="el-icon-s-home"></i>首页
          </router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/">
            <i class="el-icon-s-custom"></i>我的主页
          </router-link>
        </el-dropdown-item>
        <el-dropdown-item divided>
          <a href="javascript:void(0)" @click="loginOut">
            <i class="el-icon-switch-button"></i>登出
          </a>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  methods: {
    ...mapMutations(["removeToken", "removeUsername"]),
    loginOut() {
      /*
        1.清空 用户信息
        2.清空 token 数据
      */
      this.removeToken();
      this.removeUsername();
      //  3.routes 还原
      this.$router.options.routes[1].children.splice(1);
      this.$router.$addRoutes(this.$router.options.routes);
      this.$router.replace("/login");
    }
  }
};
</script>